<template>
    <div class="report-container">
        <h1>报表</h1>

        <div class="filter-container">
            <div class="filter-inputs" v-show="showFilter">
                <label>起始时间:</label>
                <el-date-picker v-model="getReportForm.startTime" type="date" placeholder="选择日期" />
                <label>结束时间:</label>
                <el-date-picker v-model="getReportForm.endTime" type="date" placeholder="选择日期" />
                <label>类型:</label>
                <el-select v-model="getReportForm.type" placeholder="请选择类型">
                    <el-option label="日报" :value="1"></el-option>
                    <el-option label="月报" :value="2"></el-option>
                    <el-option label="年报" :value="3"></el-option>
                    <el-option label="季度报" :value="4"></el-option>
                </el-select>
            </div>
            <el-button @click="getReport" type="primary" class="search-button" v-show="showFilter">查询报表</el-button>
            <el-button @click="toggleFilter" type="text" class="toggle-button">{{ showFilter ? '收起' : '展开' }}查询条件</el-button>
        </div>

        <div class="filter-details" v-show="showFilter">
            <p>其他条件查询可以在这里添加。</p>
        </div>

        <div>
            <h3 class="report-title">报表结果</h3>
            <el-table :data="reportData" style="width: 100%">
                <el-table-column prop="reportId" label="报告ID" />
                <el-table-column prop="reportType" label="报告类型" />
                <el-table-column prop="reportTime" label="报告时间(日)" />
                <el-table-column prop="createdAt" label="创建时间" />
                <el-table-column prop="updatedAt" label="更新时间" />
                <el-table-column prop="salesService" label="销售服务" />
                <el-table-column prop="salesServiceAmount" label="服务金额" />
                <el-table-column prop="preServiceAmount" label="服务前期金额" />
                <el-table-column prop="growthRateService" label="服务增长率" />
                <el-table-column prop="declineRateService" label="服务下降率" />
            </el-table>
        </div>

        <div class="charts-container">
            <div class="chart-item">
                <h3 class="chart-title">服务销售金额统计图</h3>
                <div ref="serviceSalesChart" class="chart"></div>
            </div>
            <div class="chart-item">
                <h3 class="chart-title">服务销售数量对比图</h3>
                <div ref="serviceQuantityChart" class="chart"></div>
            </div>
            <div class="chart-item">
                <h3 class="chart-title">服务增长率对比图</h3>
                <div ref="serviceGrowthChart" class="chart"></div>
            </div>
            <div class="chart-item">
                <h3 class="chart-title">销量统计图</h3>
                <div ref="salesCountChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import * as echarts from 'echarts';

export default {
    data() {
        return {
            reportData: [],
            getReportForm: {
                startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
                endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
                type: 1,
            },
            showFilter: false,
        };
    },
    methods: {
                checkTime(){
            if(this.getReportForm.endTime < this.getReportForm.startTime){
                this.$message.error('结束时间必须晚于开始时间');
                return false;
            }else{
                return true;
            }
        },
        toggleFilter() {
            this.showFilter = !this.showFilter;
        },
        getReport() {
            let apiUrl = "";
            switch (this.getReportForm.type) {
                case 1:
                    apiUrl = "/order/salesShop/selectSalesReportList"; // 日报
                    break;
                case 2:
                    apiUrl = "/order/salesShop/selectMonthSalesReportList"; // 月报
                    break;
                case 3:
                    apiUrl = "/order/salesShop/selectYearSalesReportList"; // 年报
                    break;
                case 4:
                    apiUrl = "/order/salesShop/selectQuarterSalesReportList"; // 季度报
                    break;
                default:
                    this.$message.error("请选择有效的报告类型");
                    return;
            }
                        if (!this.checkTime()) {
                return;
            }
            const formattedStartTime = dayjs(this.getReportForm.startTime).toISOString();
            const formattedEndTime = dayjs(this.getReportForm.endTime).toISOString();

            const params = {
                ...this.getReportForm,
                startTime: formattedStartTime,
                endTime: formattedEndTime
            };

            this.$http.get(apiUrl, { params }).then(res => {
                this.reportData = res.data.data; // 确保这里是数组
                this.renderCharts(); // 渲染所有图表
            }).catch(error => {
                console.error("请求失败:", error);
                this.$message.error("获取报表失败，请重试。");
            });
        },
        renderCharts() {
            const salesChart = echarts.init(this.$refs.serviceSalesChart);
            const quantityChart = echarts.init(this.$refs.serviceQuantityChart);
            const growthChart = echarts.init(this.$refs.serviceGrowthChart);
            const salesCountChart = echarts.init(this.$refs.salesCountChart);

            // 提取数据
            const salesData = this.reportData.map(item => item.salesServiceAmount);
            const quantityData = this.reportData.map(item => item.salesService);
            const growthData = this.reportData.map(item => item.growthRateService);
            const salesCountData = this.reportData.map(item => item.salesService); // 销量
            const timeLabels = this.reportData.map(item => dayjs(item.createdAt).format('YYYY-MM-DD')); // 使用创建时间作为横坐标

            // 服务销售金额统计图
            const salesOption = {
                title: { text: '服务销售金额统计图' },
                tooltip: {},
                xAxis: { type: 'category', data: timeLabels },
                yAxis: { type: 'value' },
                series: [{ name: '销售金额', type: 'line', data: salesData }]
            };

            // 服务销售数量对比图
            const quantityOption = {
                title: { text: '服务销售数量对比图' },
                tooltip: {},
                xAxis: { type: 'category', data: timeLabels },
                yAxis: { type: 'value' },
                series: [{ name: '销售数量', type: 'bar', data: quantityData }]
            };

            // 服务增长率对比图
            const growthOption = {
                title: { text: '服务增长率对比图' },
                tooltip: {},
                xAxis: { type: 'category', data: timeLabels },
                yAxis: { type: 'value' },
                series: [{ name: '增长率', type: 'line', data: growthData }]
            };

            // 销量统计图
            const salesCountOption = {
                title: { text: '销量统计图' },
                tooltip: {},
                xAxis: { type: 'category', data: timeLabels },
                yAxis: { type: 'value' },
                series: [{ name: '销量', type: 'bar', data: salesCountData }]
            };

            salesChart.setOption(salesOption);
            quantityChart.setOption(quantityOption);
            growthChart.setOption(growthOption);
            salesCountChart.setOption(salesCountOption);
        },
    },
    mounted() {
        this.getReport(); // 在组件加载时默认查询报告
    },
}
</script>

<style scoped>
.report-container {
    padding: 20px;
    background-color: #f9f9f9;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.filter-container {
    display: flex;
    flex-direction: column; /* 改为纵向排列 */
    align-items: center; /* 居中对齐 */
    margin-bottom: 20px;
}

.filter-inputs {
    display: flex;
    gap: 10px; /* 输入框之间的间距 */
}

.search-button {
    margin-top: 10px; /* 按钮与输入框之间的间距 */
}

.toggle-button {
    margin-top: 10px; /* 切换按钮与搜索按钮之间的间距 */
}

.filter-details {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-title {
    margin-top: 20px;
    font-weight: bold;
    font-size: 20px;
    color: #555;
}

.charts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.chart-item {
    width: 48%; /* 每个图表占行的48% */
    margin-bottom: 20px; /* 图表间距 */
}

.chart {
    height: 300px; /* 调整图表高度 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s; /* 动画效果 */
}

.chart:hover {
    transform: scale(1.02); /* 鼠标悬停时放大 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 增加阴影 */
}

.chart-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px; /* 标题与图表的间距 */
    color: #333;
}
</style>